<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8"/>
    <title> 3-6 控制类名（className 属性）</title>
    <link rel="stylesheet" type="text/css" href="../../css/style.css"/>
    <style>
        body{font-size:16px;}
        .one{
            border:1px solid #eee;
            width:230px;
            height:50px;
            background:#ccc;
            color:red;
        }
        .two{
            border:1px solid #ccc;
            width:230px;
            height:50px;
            background:#9CF;
            color:blue;
        }
    </style>


    <script type="text/javascript">

    </script>
</head>

<body>
<div align="center">
    <p><a href="../index.php#js" class="fontSize" title="点击进入该目录">目录</a></p>
</div>


<p id="p1" > JavaScript使网页显示动态效果并实现与用户交互功能。</p>
<input type="button" value="添加样式" onclick="add()"/>

<p id="p2" class="one">JavaScript使网页显示动态效果并实现与用户交互功能。</p>
<input type="button" value="更改外观" onclick="modify()"/>

<p></p>
<input type="button" value="点击刷新" onclick="javascript:location.reload()"/>

<script type="text/javascript">
    function add(){
        var p1=document.getElementById("p1");
        p1.className="one";
    }
    function modify(){
        var p2=document.getElementById("p2");
        p2.className="two";
    }
</script>

</body>
</html>
